﻿@{
    ViewBag.Title = "THGDT";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section breadcrumb {
    <div id="breadcrumb" class="col-md-12">
	    <ol class="breadcrumb">
		    <li><a href="#">Công trình 1</a></li>
			<li><a href="#">Tổng hợp giá dự thầu</a></li>
		</ol>
    </div>
}
@section pageHeader {
    <h3 class="panel-title">Tổng hợp giá dự thầu</h3>
}
@section stypes {
    @Styles.Render("~/Content/jquery-ui.css")
    @Styles.Render("~/Content/ui.jqgrid.css")
}
@section scripts {
    @Scripts.Render("~/Scripts/jquery.jqGrid.min.js")
    @Scripts.Render("~/Scripts/grid.locale-vi.js")
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqGrid").jqGrid({

                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'STT', name: 'STT', width: 100 },
                    { label: 'Tên hạng mục', name: 'TenCV', width: 500 },
                    { label: 'Giá dự thầu', name: 'DV', width: 200 },
                    { label: 'Ghi chú', name: 'KL', width: 200 },
                ],
                viewrecords: true,
                width: 1000,
                height: 300,
                rowNum: 20,
                pager: "#jqGridPager"
            });
        });

        $(function () {
            $('.list-group.checked-list-box .list-group-item').each(function () {

                // Settings
                var $widget = $(this),
                    $checkbox = $('<input type="checkbox" class="hidden" />'),
                    color = ($widget.data('color') ? $widget.data('color') : "primary"),
                    style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
                    settings = {
                        on: {
                            icon: 'glyphicon glyphicon-check'
                        },
                        off: {
                            icon: 'glyphicon glyphicon-unchecked'
                        }
                    };

                $widget.css('cursor', 'pointer')
                $widget.append($checkbox);

                // Event Handlers
                $widget.on('click', function () {
                    $checkbox.prop('checked', !$checkbox.is(':checked'));
                    $checkbox.triggerHandler('change');
                    updateDisplay();
                });
                $checkbox.on('change', function () {
                    updateDisplay();
                });


                // Actions
                function updateDisplay() {
                    var isChecked = $checkbox.is(':checked');

                    // Set the button's state
                    $widget.data('state', (isChecked) ? "on" : "off");

                    // Set the button's icon
                    $widget.find('.state-icon')
                        .removeClass()
                        .addClass('state-icon ' + settings[$widget.data('state')].icon);

                    // Update the button's color
                    if (isChecked) {
                        $widget.addClass(style + color + ' active');
                    } else {
                        $widget.removeClass(style + color + ' active');
                    }
                }

                // Initialization
                function init() {

                    if ($widget.data('checked') == true) {
                        $checkbox.prop('checked', !$checkbox.is(':checked'));
                    }

                    updateDisplay();

                    // Inject the icon if applicable
                    if ($widget.find('.state-icon').length == 0) {
                        $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
                    }
                }
                init();
            });

            $('#get-checked-data').on('click', function (event) {
                event.preventDefault();
                var checkedItems = {}, counter = 0;
                $("#check-list-box li.active").each(function (idx, li) {
                    checkedItems[counter] = $(li).text();
                    counter++;
                });
                $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
            });
        });
   </script>
}
<div class="row">
    <div class="col-md-12" style="text-align:center">
            <h3>BẢNG TỔNG HỢP GIÁ DỰ THẦU</h3>
            <h4>Công trình 1</h4>
        <p style="text-align:right; padding-right:30px">Đơn vị tính: VNĐ</p>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div style="overflow:auto">
            <table id="jqGrid"></table>
            <div id="jqGridPager""></div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
    </div>
    <div class="col-md-7" style="float:right; padding-top:10px; text-align:center">
                    <p><i>Hồ Chí Minh, ngày 30 tháng 01 năm 2015</i></p>
                    <p><b>ĐẠI DIỆN NHÀ THẦU</b></p><br /><br /><br /><br /><br />
                    <p>NGUYỄN VĂN A</p>
                </div>
</div>
